var vm = new Vue({
  el:"#app",
  /*Model：数据*/
  data:{
    imgBlob:{},
    speed:2000,
    src:""
  },
  
  created() {
    this.camera()
  },
  methods: {
    startTimeout(){
      setTimeout(()=>{
         // 创建canvas元素
         const canvas = document.createElement('canvas')  
         canvas.width = 320
         canvas.height = 240
         const context = canvas.getContext('2d')
         // 绘制视频帧到canvas
         context.drawImage(video, 0, 0, 320, 240) 
         // 获取图像数据
         var imgData = canvas.toDataURL("image/jpg");
         imgData = imgData.replace(/^data:image\/(png|jpg);base64,/,"")
        
         var myHeaders = new Headers();
         myHeaders.append("Accept", "*/*");
         var requestOptions = {
           method: 'POST',
           headers: myHeaders,
           body: JSON.stringify({"imgData": imgData})
         };

         fetch("https://127.0.0.1:5000/receive_image", requestOptions)
           .then(response => response.blob())
           .then(blob  => {
             const url = URL.createObjectURL(blob);
             this.src = url;
           })
           .catch(error => console.log('error', error));
           this.startTimeout()
      },this.speed)
    },
    camera(){
      navigator.mediaDevices.getUserMedia({ video: true })
      .then(stream => {
        // 视频元素显示流
        const video = document.getElementById('video')
        video.srcObject = stream
        this.startTimeout();
      })
      .catch(error => {
        console.error('访问用户媒体设备失败:', error)
      })
    }
  },
});

